<template>
  <div :style="style">
    <div :class="['image-box', border ? 'border' : '']">
      <el-image
        v-if="imageUrl !== ''"
        hide-on-click-modal
        :fit="fit"
        :src="imageUrl"
        :style="{
          width: width || '100%',
          height: height || '100%',
          maxWidth: '100%',
          maxHeight: '100%'
        }"
      />
      <div v-else class="image-edit-box border image-box">
        <cc-icon size="30" color="#999" iconId="018dca3b4707c4c43a2f"></cc-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed, onMounted } from 'vue'
import visual from "@/visual/js/visual";

const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object,
  inputParam: Object
});
const currNode = ref(props.node);
const loading = ref(true);
const fileId = ref('');
const imageUrl = ref('');
const fit = ref('');
const width = ref('');
const height = ref('');
const disabled = ref(false);
const border = ref(false);

const init = () => {
  const compStyle = props.compStyle || {};
  fit.value = compStyle['fit'];
  width.value = compStyle['width'];
  height.value = compStyle['height'];
  disabled.value = compStyle['readonly'];
  border.value = compStyle['border'] || false;
};

const loadValue = async() => {
  loading.value = false;
  const dataList = (await visual.loadData(
    props.compData,
    {},
    {inputParam: props.inputParam},
    currNode.value)).data || [];
  currNode.value.compData.dataList = JSON.stringify(dataList);
  fileId.value = dataList.length > 0 && dataList[0]['内容'] || '';
  if (fileId.value) {
    imageUrl.value = import.meta.env.VITE_IMAGE_PATH + fileId.value;
  } else {
    imageUrl.value = '';
  }
};

const style = computed(() => {
  const compStyle = props.compStyle || {};
  return visual.parseStyle(compStyle);
});

watch(() => props.compStyle, () => {
  init();
  loadValue();
}, {deep: true});

watch(() => props.node.compData?.refresh, () => {
  loadValue();
});

onMounted(() => {
  init();
  loadValue();
});
</script>

<style scoped>
.vc-image {
  height: 100%;
  width: 100%;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  border: 1px dashed #c2c2c2;
}
.vc-image :deep(.el-upload) {
  display: flex;
  text-align: center;
  cursor: pointer;
  outline: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.vc-image :deep(.el-upload span) {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vc-image:not(.is-disabled) :deep(.el-upload) {
  cursor: pointer;
}
.vc-image:not(.is-disabled) :deep(.el-upload:hover) {
  border-color: #409EFF;
}
.loading-icon {
  font-size: 28px;
  color: #8c939d;
  position: absolute;
}
.plus-icon {
  font-size: 28px;
  color: #8c939d;
  position: absolute;
}
.vc-image img {
  max-width: 100%;
  max-height: 100%;
}
.image-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.border {
  border: 1px dashed #c2c2c2;
}
.image-box img {
  max-width: 100%;
  max-height: 100%;
}
.vc-image :deep(.el-upload:after) {
  display: block;
  margin-top: 100%;
  content: ""
}
.image-item {
  position: relative;
}
.image-item .vc-icon {
  position: absolute;
  top: 5px;
  right: 5px;
}
</style>